<!-- <template>
	<div class="topic">
		<div class="topicall">
		<div class="page-title">
			<p>{{title}}</p>
		</div>
		<div class="mold">
			<div class="chosemold">
				<p>{{title}}(精选专项)</p>
				<ul>
					<li v-for="item in backdata" @click="redirection(item)">{{item.mold}}</li>
				</ul>
			</div>
			<div class="chosemold">
				<p>{{title}}(精选模拟)</p>
				<ul>
					<li v-for="item in backdata2" @click="redirection(item)">{{item.mold}}</li>
				</ul>
			</div>
		</div>
		<mt-tabbar>
			<mt-tab-item id="tab1"><router-link to='home'>
				<span class="icon iconfont <icon-in></icon-in>dex"></span></br>
				首页
			</router-link></mt-tab-item>
			<mt-tab-item id="tab2"><router-link to='errorsRecord'>
				<span class="icon iconfont icon-cuotijilu"></span></br>
				错题记录
			</router-link></mt-tab-item>
			<mt-tab-item id="tab3"><router-link to='enshrine'>
				<span class="icon iconfont icon-shoucang"></span></br>
				收藏
			</router-link></mt-tab-item>
			<mt-tab-item id="tab4"><router-link to='userpage'>
				<span class="icon iconfont icon-yonghu"></span></br>
				我的
			</router-link></mt-tab-item>
		</mt-tabbar>
		</div>
	</div>
</template>
 -->

<template>
  <div>
    <div style="margin-bottom: 100px">
      <div class="top">{{ title }}</div>
      <div class="top_title">{{ title }}(精选专项)</div>

      <div class="center">
        <div
          class="center_w50_left"
          @click="redirection(backdata[0] && backdata[0].type, '单选题')"
        >
          <div>
            <img src="../icon/20.png" alt="" />
          </div>
          <div class="center_txt">单选题</div>
          <div class="center_txt1">
            共{{ backdata[0] && backdata[0].number }}道题(已作答{{
              backdata[0] && backdata[0].answer_number
            }}道)
          </div>
        </div>
        <div
          class="center_w50_right"
          @click="redirection(backdata[2] && backdata[2].type, '多选题')"
        >
          <div>
            <img src="../icon/21.png" alt="" />
          </div>
          <div class="center_txt">多选题</div>
          <div class="center_txt1">
            共{{ backdata[2] && backdata[2].number }}道题(已作答{{
              backdata[2] && backdata[2].answer_number
            }}道)
          </div>
        </div>
      </div>
      <div class="center" style="margin-top: 20px">
        <div
          class="center_w50_left"
          @click="redirection(backdata[1] && backdata[1].type, '判断题')"
        >
          <div>
            <img src="../icon/22.png" alt="" />
          </div>
          <div class="center_txt">判断题</div>
          <div class="center_txt1">
            共{{ backdata[1] && backdata[1].number }}道题(已作答{{
              backdata[1] && backdata[1].answer_number
            }}道)
          </div>
        </div>
        <div
          class="center_w50_right"
          @click="redirection(backdata[3] && backdata[3].type, '案例解析题')"
        >
          <div>
            <img src="../icon/23.png" alt="" />
          </div>
          <div class="center_txt">案例解析题</div>
          <div class="center_txt1">
            共{{ backdata[3] && backdata[3].number }}道题(已作答{{
              backdata[3] && backdata[3].answer_number
            }}道)
          </div>
        </div>
      </div>

      <div class="top_title" style="margin-bottom: 0px">
        {{ title }}(精选模拟)
      </div>
      <div
        class="modeltest"
        @click="redirection(backdata2[0] && backdata2[0].type, '模拟考试')"
      >
        <div class="modeltest_img">
          <img src="../icon/26.png" alt="" />
        </div>
        <div class="modeltest_txt">模拟考试</div>
        <div class="modeltest_txt1">
          共90道题(单选题50道、多选题10道、判断题18道、案例解析题12道)
        </div>
      </div>

      <div class="center">
        <div
          class="center_w50_left"
          @click="redirection(backdata2[1] && backdata2[1].type, '顺序练习')"
        >
          <div>
            <img src="../icon/24.png" alt="" />
          </div>
          <div class="center_txt">顺序练习</div>
          <div class="center_txt1">
            共{{ backdata2[1] && backdata2[1].number }}道题(已作答{{
              backdata2[1] && backdata2[1].answer_number
            }}道)
          </div>
        </div>
        <div
          class="center_w50_right"
          @click="redirection(backdata2[2] && backdata2[2].type, '随机练习')"
        >
          <div>
            <img src="../icon/25.png" alt="" />
          </div>
          <div class="center_txt">随机练习</div>
          <div class="center_txt1">
            共{{ backdata2[2] && backdata2[2].number }}道题
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="ab" @click="$router.replace('/home')">
        <img src="../icon/28.png" alt="" />
      </div>
      <div
        class="ab"
        @click="
          $router.push({ path: '/errororcollecttopic', query: { type: 1 } })
        "
      >
        <img src="../icon/29.png" alt="" />
      </div>
      <div
        @click="
          $router.push({
            path: '/errororcollecttest',
            query: {
              type: 2,
              id: 1,
            },
          })
        "
      >
        <img src="../icon/30.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$route.query.title,
      backdata: [],
      backdata2: [],
      pid: this.$route.query.id,
      zh: this.$route.query.zh,
    };
  },
  mounted: function () {
    this.ajaxrequest();
  },
  methods: {
    ajaxrequest: function () {
      this.$http.get("/api/mzcy/tklb/index?xclass_id=" + this.pid).then(
        function (res) {
          // console.log(res.data);
          // 响应成功回调
          this.backdata = res.data.xzdx;
          this.backdata2 = res.data.xtmn;
          // console.log(this.backdata);
          // console.log(this.backdata2);
        },
        function (res) {
          // 响应错误回调
        }
      );
    },
    redirection: function (type, name) {
      // debugger
      // 判断不同类型的题跳转到对应组件
      // if (type !== 4) {
      this.$router.push({
        path: "/practicetest",
        query: {
          pid: this.pid,
          type,
          pidTitle: this.title,
          title: name,
        },
      });
      // } else {
      //   this.$router.push({
      //     path: "/examinationpage",
      //     query: {
      //       pid: this.pid,
      //       type,
      //       pidTitle: this.title,
      //       title: name,
      //     },
      //   });
      // }
    },
  },
};
</script>

<style scoped>
@import url("../css/topic.css");
.topic {
  width: 100%;
  background: #ffffff;
}

.topicall {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.page-title {
  width: 100%;
  background: #24b7e5;
  overflow: hidden;
  padding: 0.8rem 0;
  position: relative;
  /* border-bottom: 1px solid #b9a9a9; */
}

.page-title p {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
}
.mold {
  width: 100%;
  padding: 1rem 0;
}
.chosemold {
  width: 87%;
  margin: 0 auto;
  background: #f2f2f2;
  border-radius: 5px;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}
.chosemold p {
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  color: #666666;
  border-bottom: 1px solid #cccccc;
  padding: 0.7rem 0;
}
.chosemold ul {
  width: 100%;
  padding: 0.3rem 0;
  display: flex;
  flex-wrap: wrap;
}
.chosemold ul li {
  width: 22vw;
  padding: 0.4rem 0.6rem;
  background: #cee1eb;
  margin: 0.5rem 0.4rem 0.5rem 0;
  border-radius: 5px;
  font-size: 0.9rem;
}
.change {
  color: #26a2ff !important;
}
</style>
